<template>
  <div id="screen">
    <div class="head_top">
      <span>智能化运维数据监控中心</span>
    </div>
    <div class="selection-box current-route">
      <el-select
        v-model="routeLine"
        placeholder="请选择线路"
        @change="changeRouteLine"
      >
        <el-option
          v-for="item in routeLines"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="deviceId"
        placeholder="请选择设备"
        style="margin-left: 10px"
      >
        <el-option
          v-for="item in DeviceList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button class="warning-btn" @click="search">查询</el-button>
    </div>
    <div class="visual">
      <div class="visual_left">
        <div class="visual_box">
          <div class="visual_title">
            <span>线路设备统计</span>
            <img src="@/assets/ksh33.png" />
          </div>
          <div class="visual_chart" id="main1"></div>
        </div>
        <div class="visual_box">
          <div class="visual_title">
            <span>设备电流统计</span>
            <img src="@/assets/ksh33.png" />
          </div>
          <div class="visual_chart" id="main2"></div>
        </div>
        <div class="visual_box">
          <div class="visual_title">
            <span>设备电压统计</span>
            <img src="@/assets/ksh33.png" />
          </div>
          <div class="visual_chart" id="main22"></div>
        </div>
      </div>
      <div class="visual_con">
        <div class="visual_conTop">
          <div class="visual_conTop_box visual_conTop1">
            <div>
              <h3>温度警情数(起)</h3>
              <p :class="{ 'warning-title': surveyInfo.wdcount > 0 }" @click="handleRoute(surveyInfo.wdcount)">
                {{ surveyInfo.wdcount }}
              </p>
              <div class="conTop_smil">
                <!-- <a class="sz"
                  >日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i
                ></a>
                <a class="xd"
                  >周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i-->
                <!-- ></a> -->
              </div>
            </div>
          </div>
          <div class="visual_conTop_box visual_conTop2">
            <div>
              <h3>湿度警情数</h3>
              <p :class="{ 'warning-title': surveyInfo.sdcount > 0 }" @click="handleRoute(surveyInfo.sdcount)">
                {{ surveyInfo.sdcount }}
              </p>
              <div class="conTop_smil">
                <!-- <a class="">缓行</a>
                  <a class="">平均车速<span>120</span>KM/H </a>-->
              </div>
            </div>
          </div>
          <div class="visual_conTop_box visual_conTop1">
            <div>
              <h3>电流警情数(起)</h3>
              <p :class="{ 'warning-title': surveyInfo.dlcount > 0 }" @click="handleRoute(surveyInfo.dlcount)">
                {{ surveyInfo.dlcount }}
              </p>
              <div class="conTop_smil">
                <!-- <a class="sz"
                  >日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i
                  ></a>-->
                <!-- <a class="xd"
                  >周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i
                  ></a>-->
              </div>
            </div>
          </div>
          <div class="visual_conTop_box visual_conTop2">
            <div>
              <h3>电压警情数(起)</h3>
              <p :class="{ 'warning-title': surveyInfo.dycount > 0 }" @click="handleRoute(surveyInfo.dycount)">
                {{ surveyInfo.dycount }}
              </p>
              <div class="conTop_smil">
                <a class="null">null</a>
                <!-- <a class="xd"
                  >月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i
                  ></a>-->
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="visual_conBot">
          <img class="visual_conBot_l" src="@/assets/ksh42.png" />
          <img class="visual_conBot_2" src="@/assets/ksh43.png" />
          <img class="visual_conBot_3" src="@/assets/ksh44.png" />
          <img class="visual_conBot_4" src="@/assets/ksh45.png" />
          <div class="visual_chart_text">
            <!-- <h1>出行服务+大数据</h1>
              <h2>山西省交通大数据分析平台</h2>-->
          </div>
          <div class="visual_chart" id="main8"></div>
          <div class="visual_conBot_bot">
            <h3>设备报警日志</h3>
            <div class="visualSssf_center">
              <!-- <el-table
                :data="warnData"
                style="width: 100%"
                :max-height="140"
                row-class-name="tableClass"
                ref="table"
              >
                <el-table-column prop="imei" label="IMEI" align="center"></el-table-column>
                <el-table-column prop="abnormalName" label="异常类型" align="center"></el-table-column>
                <el-table-column prop="content" label="异常内容" align="center"></el-table-column>
                <el-table-column prop="createTime" label="采集时间" align="center"></el-table-column>
                </el-table>-->
              <div class="table-header">
                <ul>
                  <li>IMEI</li>
                  <li>异常类型</li>
                  <li>异常内容</li>
                  <li>采集时间</li>
                </ul>
              </div>
              <div class="table-content" id="table-roll">
                <ul v-for="(item, index) in warnData" :key="index">
                  <li>{{ item.imei }}</li>
                  <li>{{ item.abnormalName }}</li>
                  <li>{{ item.content }}</li>
                  <li>{{ item.createTime }}</li>
                </ul>
              </div>
            </div>
            <!-- <div class="visualSssf_right"> -->
            <!-- <div class="visualSssf_right_box" id="main5"></div> -->
            <!-- <div class="visualSssf_right_box" id="main6"></div> -->
            <!-- <div class="visualSssf_right_box" id="main7"></div> -->

            <!-- </div> -->
            <div class="clear"></div>
          </div>
        </div>
      </div>
      <div class="visual_right">
        <div class="visual_box">
          <div class="visual_title">
            <span>环境湿度统计</span>
            <img src="@/assets/ksh33.png" />
          </div>
          <div class="swiper-container visual_swiper1 visual_chart">
            <div class="swiper-wrapper">
              <div class="swiper-slide" id="main3"></div>
              <!-- <div class="swiper-slide" id="main31"></div> -->
            </div>
          </div>
        </div>
        <div class="visual_box visualSfzsfl">
          <div class="visual_title">
            <span>设备温度统计</span>
            <img src="@/assets/ksh33.png" />
          </div>
          <div class="visual_chart" id="main99"></div>
          <!-- <div class="visual_chart" id="main9"></div> -->
          <!-- <div class="visual_table">
            <table>
              <tr>
                <td>小型车</td>
                <td>中型车</td>
                <td>大型车</td>
              </tr>
              <tr>
                <td>2486万</td>
                <td>2486万</td>
                <td>2486万</td>
              </tr>
              <tr>
                <td>2486万</td>
                <td>2486万</td>
                <td>2486万</td>
              </tr>
              <tr>
                <td>2486万</td>
                <td>2486万</td>
                <td>2486万</td>
              </tr>
              <tr>
                <td>2486万</td>
                <td>2486万</td>
                <td>2486万</td>
              </tr>
            </table>
            </div>-->
        </div>
        <div class="visual_box">
          <div class="visual_title">
            <span>环境温度统计</span>
            <img src="@/assets/ksh33.png" />
          </div>
          <div class="swiper-container visual_swiper2 visual_chart">
            <div class="swiper-wrapper">
              <!-- <div class="swiper-slide" id="main4"></div>
                <div class="swiper-slide" id="main41"></div>-->
              <div id="main-last"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div id="load" v-show="!showBody">
      <div class="load_img">
        <!-- 加载动画 -->
        <img class="jzxz1" src="@/assets/jzxz1.png" />
        <img class="jzxz2" src="@/assets/jzxz2.png" />
      </div>
    </div>
  </div>
</template>
<script>
import { option1, optionLast,optionLast2, option2, option8 } from "./screenData";
import Swiper from "swiper";
import echarts from "echarts";
import {
  getSurvey,
  getDevicesurvey,
  getElectricinfo,
  getAbnormalrecord,
  getMonthData,
  getMemberRoute,
  getDeviceList,
} from "@/api";
export default {
  data() {
    return {
      surveyInfo: {}, //警情统计
      option11: {},
      warnData: [],
      tableHeight: 10,
      myTimer: null,
      showBody: false,
      routeLines: [],
      routeLine: "",
      DeviceList: [],
      deviceId: "",
      myChart2: null,
      myChart22: null,
      myChart1: null,
      myChart3: null,
      myChartLast: null,
      myChartLast2: null,
      myChart99:null
    };
  },
  created() {
    this.getCurrentRoute();
  },
  mounted() {
    this.drawLines();
    let timer = null;
    clearTimeout(timer)
    timer =  setTimeout(() => {
      this.showBody = true;
    }, 1000);
  },
  methods: {
    //线路设备统计
    getSurveyInfo(deviceId) {
      const params = {
        deviceId: deviceId,
      };
      getSurvey(params)
        .then((res) => {
          console.log(res);
          if (res.statusCode == 200) {
            this.surveyInfo = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDevicesurveyList(deviceId) {
      const params = {
        deviceId: deviceId,
      };
      getDevicesurvey(params).then((res) => {
        if (res.statusCode == 200) {
          const { data } = res;
          let cateData = [];
          let mapData = [];
          data.forEach((item) => {
            cateData.push(item.routeName);
            mapData.push(item.deviceCount);
          });
          option1.xAxis.data = cateData;
          option1.series[0].data = mapData;
          //线路设备统计
          this.myChart1 = this.$echarts.init(document.getElementById("main1"));
          this.myChart1.setOption(option1,true);
        }
      });
    },
    getElectricinfos(type, deviceId) {
      const params = {
        page: 1,
        type: type,
        deviceId: deviceId,
      };
      getElectricinfo(params)
        .then((res) => {
          if (res.statusCode == 200) {
            const { data } = res;
            option2.xAxis.data = []
            option2.legend.data = []
            option2.series = []
            let seriesData = Object.keys(data);
            let cateData = [];
            let targetArr = [];
            Object.keys(data).forEach((item) => {
              data[item].map((child) => {
                if (cateData.indexOf(Object.keys(child)[0]) < 0) {
                  cateData.push(Object.keys(child)[0]);
                }
              });
            });
            console.log("cateDta",cateData);
            option2.xAxis.data = cateData;
            targetArr = Object.keys(data).map((item) => {
              let currentdata = data[item].map((ele) => {
                return Object.values(ele)[0];
              });
              let obj = {};
              obj[item] = currentdata;
              return obj;
            });
            console.log(targetArr);
            option2.legend.data = targetArr.map((item) => {
              return Object.keys(item)[0];
            });
            targetArr.forEach((item, index) => {
              option2.series.push({
                name: Object.keys(item)[0],
                type: "line",
                smooth: true,
                lineStyle: {
                  normal: {
                    width: 2,
                  },
                },
                // areaStyle: {
                //     normal: {
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //             offset: 0,
                //             color: 'rgba(137, 189, 27, 0.3)'
                //         }, {
                //             offset: 0.8,
                //             color: 'rgba(137, 189, 27, 0)'
                //         }], false),
                //         shadowColor: 'rgba(0, 0, 0, 0.1)',
                //         shadowBlur: 10
                //     }
                // },
                // itemStyle: {
                //     normal: {
                //         color: 'rgb(137,189,27)'
                //     }
                // },
                data: targetArr[index][Object.keys(item)[0]],
              });
            });
            //设备电流统计
            if (type == 1) {
              this.myChart2 = this.$echarts.init(
                document.getElementById("main2")
              );
              this.myChart2.setOption(option2,true);
            } else if (type == 2) {
              //设备电压统计
              this.myChart22 = this.$echarts.init(
                document.getElementById("main22")
              );
              option2.tooltip.formatter = function(params){
                  let str = `${params[0].axisValue} </br>`
                  params.forEach(item => {
                  str += `<span style="display:inline-block;width:10px;height:10px;background:${item.color};"></span><span style="margin-left:10px;line-height:20px;">${item.seriesName}</span>&nbsp;&nbsp;<span style="line-height:20px;">${item.data}V</span>`
                  })
                  return str
              }
              option2.yAxis[0].name = '单位/ V'
              this.myChart22.setOption(option2,true);
            } else if (type == 3) {
              //设备温度统计
              this.myChart99 = this.$echarts.init(
                document.getElementById("main99")
              );
              option2.tooltip.formatter = function(params){
                  let str = `${params[0].axisValue} </br>`
                  params.forEach(item => {
                  str += `<span style="display:inline-block;width:10px;height:10px;background:${item.color};"></span><span style="margin-left:10px;line-height:20px;">${item.seriesName}</span>&nbsp;&nbsp;<span style="line-height:20px;">${item.data}℃</span>`
                  })
                  return str
              }
              option2.yAxis[0].name = '单位/ 温度℃'
              this.myChart99.setOption(option2,true);
            } else if (type == 4) {
              // data.forEach((item) => {
              //   cateData.push(item.routeName);
              //   mapData.push(item.deviceCount);
              // });
              // optionLast.xAxis.data = cateData;
              // optionLast.series[0].data = mapData;
              //设备电压统计
              this.myChartLast = this.$echarts.init(
                document.getElementById("main-last")
              );
               this.myChartLast.setOption(option2,true);
            }
          } else {
            console.log(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getLastChartData(deviceId) {
      const params = {
        page: 1,
        type: 4,
        deviceId: deviceId,
      };
      let cateData = [],
        mapData1 = [],
        mapData2 = [];
      let res = await getElectricinfo(params);
      if (res.statusCode == 200) {
        const { data } = res;
        Object.keys(data).forEach((item) => {
          data[item].map((child) => {
            if (cateData.indexOf(Object.keys(child)[0]) < 0) {
              cateData.push(Object.keys(child)[0]);
            }
          });
        });
        let targetArr = Object.keys(data).map((item) => {
          let currentdata = data[item].map((ele) => {
            return Object.values(ele)[0];
          });
          let obj = {};
          obj[item] = currentdata;
          return obj;
        });
        mapData1 = targetArr[0][Object.keys(targetArr[0])];
        optionLast.xAxis.data = cateData;
        optionLast.series[0].data = mapData1;
        optionLast2.xAxis.data = cateData;
        const params2 = {
          page: 1,
          type: 5,
          deviceId: deviceId,
        };
        let res2 = await getElectricinfo(params2);
        if (res2.statusCode == 200) {
          let targetArr2 = Object.keys(res2.data).map((item) => {
            let currentdata2 = res2.data[item].map((ele) => {
              return Object.values(ele)[0];
            });
            let obj2 = {};
            obj2[item] = currentdata2;
            return obj2;
          });
          mapData2 = targetArr2[0][Object.keys(targetArr[0])];
          optionLast2.series[0].data = mapData2;
          //设备电压统计
          this.myChartLast = this.$echarts.init(
            document.getElementById("main-last")
          );
          this.myChartLast.setOption(optionLast,true);

           this.myChartLast2 = this.$echarts.init(
            document.getElementById("main3")
          );
          this.myChartLast2.setOption(optionLast2,true);
        } else {
          console.log(res.msg);
        }
      } else {
        console.log(res.msg);
      }
    },
    getAbnormalrecords(deviceId) {
      const params = {
        deviceId: deviceId,
      };
      getAbnormalrecord(params)
        .then((res) => {
          if (res.statusCode == 200) {
            this.warnData = res.data.items || [];
            this.$nextTick(() => {
              this.roll();
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getUnnormalData(deviceId) {
      const params = {
        deviceId: deviceId,
      };
      getMonthData(params)
        .then((res) => {
          if (res.statusCode == 200) {
            //本月异常数据统计
            let color = ["#e9df3d", "#f79c19", "#21fcd6", "#08c8ff", "#df4131"];
            let data = [
              {
                name: "电流",
                value: res.data.dlcount || 0,
              },
              {
                name: "环境温度",
                value: res.data.wdcount || 0,
              },
              {
                name: "环境湿度",
                value: res.data.sdcount || 0,
              },
              {
                name: "电压",
                value: res.data.dycount || 0,
              },
            ];

            let max = data[0].value;
            data.forEach(function (d) {
              max = d.value > max ? d.value : max;
            });

            let renderData = [
              {
                value: [],
                name: "异常数据统计",
                symbol: "none",
                lineStyle: {
                  normal: {
                    color: "#ecc03e",
                    width: 2,
                  },
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        {
                          offset: 0,
                          color: "rgba(203, 158, 24, 0.8)",
                        },
                        {
                          offset: 1,
                          color: "rgba(190, 96, 20, 0.8)",
                        },
                      ],
                      false
                    ),
                  },
                },
              },
            ];

            data.forEach(function (d, i) {
              let value = [0, 0, 0, 0];
              (value[i] = max), (renderData[0].value[i] = d.value);
              renderData.push({
                value: value,
                symbol: "circle",
                symbolSize: 12,
                lineStyle: {
                  normal: {
                    color: "transparent",
                  },
                },
                itemStyle: {
                  normal: {
                    color: color[i],
                  },
                },
              });
            });
            let indicator = [];

            data.forEach(function (d) {
              indicator.push({
                name: d.name,
                max: max,
                color: "#fff",
              });
            });

            const option3 = {
              tooltip: {
                show: true,
                trigger: "item",
              },
              radar: {
                center: ["50%", "50%"], //偏移位置
                radius: "80%",
                startAngle: 40, // 起始角度
                splitNumber: 4,
                shape: "circle",
                splitArea: {
                  areaStyle: {
                    color: "transparent",
                  },
                },
                axisLabel: {
                  show: false,
                  fontSize: 20,
                  color: "#000",
                  fontStyle: "normal",
                  fontWeight: "normal",
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(255, 255, 255, 0.5)",
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(255, 255, 255, 0.5)",
                  },
                },
                indicator: indicator,
              },
              series: [
                {
                  type: "radar",
                  data: renderData,
                },
              ],
            };
            //本月发生事件
            this.myChart3 = this.$echarts.init(document.getElementById("main3"));
            this.myChart3.setOption(option3,true);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawLines() {
      //中间地图
      let myChart8 = this.$echarts.init(document.getElementById("main8"));
      myChart8.setOption(option8,true);
    },
    roll() {
      const tableRoll = document.getElementById("table-roll");
      const sCenter = document.querySelector(".visualSssf_center");
      const tableHeader = document.querySelector(".table-header");
      let rHeight = tableRoll.clientHeight;
      let tHeight = tableHeader.clientHeight;
      let cHeight = sCenter.clientHeight;
      let scrollHeight = rHeight - cHeight;
      let top = 0;
      clearInterval(this.timer)
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.timer = setInterval(() => {
        top++;
        // 元素自增距离顶部1像素
        tableRoll.style.top = "-" + top + "px";
        if (top > scrollHeight) {
          // 重置table距离顶部距离
          top = 0;
        }
      }, 120);
    },
    handleRoute(val) {
      if(val > 0)  this.$router.push({
        path:'/WarningSystem'
      })
     
    },
    mouseover() {
      clearInterval(this.myTimer);
    },

    mouseout() {
      this.roll();
    },
    // 搜索
    search() {
      this.getSurveyInfo(this.deviceId);
      this.getDevicesurveyList(this.deviceId);
      this.getElectricinfos(1, this.deviceId);
      this.getElectricinfos(2, this.deviceId);
      this.getElectricinfos(3, this.deviceId);
      this.getLastChartData(this.deviceId);
      this.getAbnormalrecords(this.deviceId);
      // this.getUnnormalData(this.deviceId);
    },
    // 获取当前线路
    getCurrentRoute() {
      getMemberRoute()
        .then((res) => {
          if (res.statusCode == 200) {
            if (res.data && res.data.length > 0) {
              this.routeLines = res.data.map((item) => {
                return {
                  value: item.id,
                  label: item.routeName,
                };
              });
              this.routeLine = res.data[0].id;
              //初始化第一条线路
              this.getDeviceList(this.routeLine);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取当前线路下设备
    getDeviceList(routeId) {
      getDeviceList({
        routeId: routeId,
      })
        .then((res) => {
          if (res.statusCode == 200) {
            this.DeviceList = res.data.map((item) => {
              return {
                value: item.deviceid,
                label: item.devicename,
              };
            });
            this.deviceId = res.data[0].deviceid;

            //初始化线路
            this.getSurveyInfo(this.deviceId);
            this.getDevicesurveyList(this.deviceId);
            this.getElectricinfos(1, this.deviceId);
            this.getElectricinfos(2, this.deviceId);
            this.getElectricinfos(3, this.deviceId);
            this.getLastChartData(this.deviceId);
            this.getAbnormalrecords(this.deviceId);
            // this.getUnnormalData(this.deviceId);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeRouteLine() {
      getDeviceList({
      routeId: this.routeLine,
    })
      .then((res) => {
        if (res.statusCode == 200) {
          this.DeviceList = res.data.map((item) => {
            return {
              value: item.deviceid,
              label: item.devicename,
            };
          });
          this.deviceId = res.data[0].deviceid;
        }
      })
      .catch((err) => {
        console.log(err);
      });
    },
  },
};
</script>
<style lang="less" scoped>
#screen {
  background: #1b232d;
  position: relative;
  height: 100vh;
  padding-bottom: 40px;
  .wrapper {
    position: relative;
    height: 90vh;
  }
}
.head_top {
  position: relative;
  background: url(../../assets/jcdsj_logo.png) no-repeat center center;
  height: 42px;
  line-height: 42px;
  z-index: 1;
}
.head_top span {
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  background: linear-gradient(0deg, #0095d6, #46daff);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  //   text-fill-color: transparent;
  font-weight: bolder;
  cursor: text;
}
.head_top img {
  width: 90%;
  margin: auto;
}
.head_top p {
  width: 100%;
  text-align: center;
  color: #55bfff;
  position: absolute;
  bottom: -18px;
  left: -10px;
}
.head_top p span {
  font-family: "yjsz";
  font-size: 20px;
}

.visual {
  height: calc(100% - 33px);
  padding-top: 10px;
  position: relative;
  z-index: 1;
}

.visual_box {
  height: 33.3%;
}
.visual_box .visual_title {
  position: relative;
  height: 35px;
  margin: 5px 0;
  text-align: left;
  padding-left: 15px;
}
.visual_box .visual_title span {
  color: #fff;
  font-size: 18px;
  line-height: 35px;
}
.visual_box .visual_title img {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.visual_box .visual_chart {
  height: calc(100% - 30px);
  width: 94%;
}

.visual_left {
  width: 25%;
  height: 100%;
  float: left;
}
.visual_left .sfzcll {
  position: relative;
}
.visual_left .sfzcll a {
  width: 32%;
  text-align: center;
  line-height: 25px;
  color: #fff;
  display: inline-block;
}
.visual_left .sfzcll .sfzcll_pos_box {
  width: 100%;
  height: calc(100% - 30px);
}
.visual_left .sfzcll .sfzcll_box {
  width: 100%;
  height: calc(33% - 15px);
  line-height: 5;
  background: rgba(15, 47, 72, 0.8);
  border: 1px solid #1380bd;
  position: relative;
  margin-bottom: 15px;
  overflow: hidden;
}
.visual_left .sfzcll .sfzcll_box:last-of-type {
  margin: 0;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk {
  position: absolute;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:first-of-type {
  top: -2px;
  left: -2px;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(2) {
  top: -2px;
  right: -2px;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(3) {
  bottom: -2px;
  right: -2px;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(4) {
  bottom: -2px;
  left: -2px;
}
.visual_left .sfzcll .sfzcll_box label {
  width: 33%;
  color: #fff;
  text-align: center;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.visual_left .sfzcll .sfzcll_box label img {
  width: 23px;
  height: 23px;
  margin-right: 5px;
  margin-top: -2px;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk {
  width: 33%;
  height: 100%;
  float: left;
  padding: 2px 5px;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk > div {
  height: 100%;
  background: url(../../assets/ksh38.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 1.5em;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygl {
  color: #00ffc6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygh {
  color: #ffe400;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visual_con {
  width: 50%;
  height: 100%;
  float: left;
  padding: 25px 20px 0 20px;
}
.visual_con .visual_conTop {
  height: 130px;
  margin-bottom: 10px;
}
.visual_con .visual_conTop .visual_conTop_box {
  height: 100%;
  padding: 0 3px;
}
.visual_con .visual_conTop .visual_conTop1 {
  width: 20%;
  height: 100%;
  float: left;
}
.visual_con .visual_conTop .visual_conTop1 > div {
  background: url(../../assets/ksh40.png) no-repeat;
  background-size: 100% 100%;
}
.visual_con .visual_conTop .visual_conTop2 {
  width: 30%;
  height: 100%;
  float: left;
}
.visual_con .visual_conTop .visual_conTop2 > div {
  background: url(../../assets/ksh39.png) no-repeat;
  background-size: 100% 100%;
}
.visual_right {
  width: 25%;
  height: 100%;
  float: right;
}
.visual_con .visual_conTop .visual_conTop_box > div {
  height: 100%;
}
.visual_con .visual_conTop .visual_conTop_box > div h3 {
  color: #fff;
  font-size: 16px;
  padding: 16px 0 0 20px;
}
.visual_con .visual_conTop .visual_conTop_box > div p {
  width: 100%;
  //   width: 33%;
  float: left;
  line-height: 85px;
  color: #20dbfd;
  text-shadow: 0 0 25px #00d8ff;
  font-size: 40px;
  font-family: "yjsz";
  text-align: center;
}
.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil {
  //   width: 67%;
  height: 60px;
  float: left;
  padding-top: 23px;
}
.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a {
  display: block;
  line-height: 20px;
  text-align: left;
  color: #fff;
  padding-left: 9px;
}
.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil span {
  width: 32px;
  display: inline-block;
  margin-left: 3px;
}
.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a.sz {
  color: #fe3e12;
}
.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a.xd {
  color: #12fe81;
}
.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a.null {
  visibility: hidden;
}

.visual_con .visual_conBot {
  height: calc(100% - 136px);
  background: url(../../assets/ksh41.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.visual_con .visual_conBot > img {
  position: absolute;
  width: 25px;
  height: 25px;
}
.visual_con .visual_conBot .visual_conBot_l {
  position: absolute;
  left: 0;
  top: 0;
}
.visual_con .visual_conBot .visual_conBot_2 {
  position: absolute;
  right: 0;
  top: 0;
}
.visual_con .visual_conBot .visual_conBot_3 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.visual_con .visual_conBot .visual_conBot_4 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.visual_con .visual_conBot .visual_chart {
  width: 100%;
  height: 100%;
  position: absolute;
}
.visual_con .visual_conBot .visual_chart_text {
  color: #fff;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 99;
}
.visual_con .visual_conBot .visual_chart_text h1 {
  font-size: 26px;
  margin-bottom: 6px;
}
.visual_con .visual_conBot .visual_chart_text h2 {
  font-size: 20px;
}
.visual_con .visual_conBot .visual_conBot_bot {
  width: calc(100% - 8px);
  height: 180px;
  background: rgba(16, 54, 87, 0.5);
  // background: #1b232d;
  border: 1px solid #345f92;
  position: absolute;
  bottom: 4px;
  left: 4px;
  z-index: 99;
}

.visualSssf_left {
  width: 40%;
  float: left;
  color: #fff;
  padding: 10px 20px 0 20px;
}
.visual_conBot_bot h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
}
.visualSssf_left a {
  width: 32%;
  color: #fff;
  display: inline-block;
  margin-bottom: 10px;
  cursor: pointer;
}
.visualSssf_left a.active {
  color: #01f0ff;
}
.visualSssf_right {
  width: 60%;
  height: 100%;
  float: left;
}
.visualSssf_right .visualSssf_right_box {
  width: 33%;
  float: left;
  height: 100%;
}

.visualSfzsfl {
  position: relative;
}
.visualSfzsfl .visual_chart {
  // opacity: 0.6;
}
.visualSfzsfl .visual_table {
  width: 60%;
  position: absolute;
  z-index: 99;
  top: 40px;
  left: 0;
}
.visualSfzsfl .visual_table table {
  width: 100%;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
.visualSfzsfl .visual_table table tr {
  border-bottom: 1px dashed #ddd;
}
.visualSfzsfl .visual_table table tr:first-child {
  color: #01c0ff;
}
.visualSfzsfl .visual_table table tr:last-child {
  border-bottom: 1px solid #ddd;
}
.visualSssf_center {
  // padding-left: 17px;
  color: #fff;
  border-top: 1px solid #345f92;
  position: relative;
  height: 140px;
  overflow: hidden;
  .table-header {
    position: relative;
    z-index: 10;
    background: #345f92;
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        flex: 0 0 25%;
        text-align: center;
        border-bottom: 1px solid #345f92;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
      }
    }
  }
  .table-content {
    position: absolute;
    width: 100%;
    z-index: 1;
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        flex: 0 0 25%;
        text-align: center;
        border-bottom: 1px solid #345f92;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
      }
    }
  }
}
/deep/.tableClass {
  background: #1b232d;
  color: #fff;
}
/deep/.el-table th.el-table__cell,
/deep/.el-table tr {
  background: #1b232d !important;
  color: #fff;
  text-align: center;
  padding: 0 0;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: #1b232d !important;
  color: #fff;
}
/deep/.el-table .el-table__cell {
  padding: 0 0;
}
/deep/.el-table td.el-table__cell,
/deep/.el-table th.el-table__cell.is-leaf {
  border: 1px solid #345f92;
}

#main8 {
  width: 800px;
  height: 600px;
}
#main-last {
  width: 94%;
  // height: calc(100% - 30px);
}

/* 加载旋转动画 */
#load {
  width: 100%;
  height: calc(100% + 135px);
  position: absolute;
  background: url(../../assets/data08.png) no-repeat #061537;
  background-size: cover;
  top: -135px;
  left: 0;
  z-index: 999;
}
#load .load_img {
  position: absolute;
  left: calc(50% - 182px);
  top: calc(50% - 182px);
}
.load_img img {
  position: absolute;
  left: 0;
  top: 0;
}
.load_img .jzxz1 {
  animation: xz1 8s infinite linear;
}
@keyframes xz1 {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.load_img .jzxz2 {
  animation: xz2 7s infinite linear;
}
@keyframes xz2 {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.warning-title {
  color: #e6a23c !important;
  text-shadow: 0 0 25px #e6a23c !important;
  cursor: pointer;
}
// .current-route{
//   position: absolute;
//   top:-15px;
//   left:20px;
//   color:#fff;
// }
.selection-box {
  display: flex;
  align-items: center;
  margin: 5px 20px 0;
  & > span {
    margin-right: 20px;
    color: #fff;
  }
  .selection-centerbox {
    margin: 0 20px;
  }
  .warning-btn {
    height: 40px;
    background: #55bfff;
    border-radius: 5px;
    padding: 0 35px;
    color: #fff;
    margin-left: 20px;
  }
}
/deep/.el-button {
  border: none;
}
</style>